<template>
  <div>
    <!-- 顶部栏 -->
    <van-nav-bar :title="title" style="background:#eb4450;color:white;"></van-nav-bar>
    <van-search
      v-model="Search"
      shape="round"
      background="#eb4450"
      placeholder="请输入搜索关键词"
      @click="SearchPage"
    />
    <van-tabs v-model="active">
      <van-tab title="综合">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="10"
          :immediate-check="false"
        >
          <van-cell v-for="(item,index) in goods_list" :key="index">
            <van-card
              :price="item.goods_price"
              :title="item.goods_name"
              :thumb="item.goods_small_logo||'http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_400x400.jpg'"
              @click="ListClick(item.goods_id)"
            />
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="销量">内容 2</van-tab>
      <van-tab title="价格">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'List',
  data () {
    return {
      cat_id: '',
      goods_list: [],
      loading: false,
      finished: false,
      active: '',
      title: '商品列表',
      Search: '',
      queryParams: {
        query: '',
        cid: '',
        pagenum: 1,
        pagesize: 10
      },
      ListPage: 1,
      list: [],
      falg: true
    }
  },
  methods: {
    getParams () {
      this.cat_id = this.$route.params.catId || ''
      this.queryParams.cid = this.$route.params.catId || ''
      // console.log(this.cat_id)
    },
    async onLoad () {
      // 数据全部加载完成
      if (this.queryParams.pagenum >= 3) {
        this.finished = true
      }
      this.queryParams.pagenum++
      this.getGoodsList()
      // 加载状态结束
      this.loading = false
    },
    async getGoodsList () {
      if (this.cat_id === '') {
        return this.$router.go(-1)
      } else {
        // console.log('id' + this.queryParams.cid)
        const { data: res } = await this.$http.get('/goods/search', { params: this.queryParams })
        if (res.meta.status !== 200) return this.$message.fail('获取数据失败')
        // 获取数据库总页码
        this.ListPage = Math.ceil(res.message.total / this.queryParams.pagesize)
        this.goods_list = [...this.goods_list, ...res.message.goods]
        // return this.$message.success('成功')
      }
    },
    SearchPage () {
      this.$router.push({ name: 'search' })
    },
    async ListClick (id) {
      this.$router.push({ name: 'detail', params: { goods_id: id } })
    }
  },
  watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
    $route: 'getParams'
  },
  created () {
    this.getParams()
    this.getGoodsList()
  }

  // console.log(this.goods_list)
}
</script>

<style lang="less" scope>
.van-card__title {
  font-size: 14px;
}
.van-card__price {
  color: #eb4450;
}
.van-card__price-integer {
  margin-left: 5px;
}
</style>
